<template>
  <div>
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <template slot="menuForm" slot-scope="{ size }">
        <el-button type="primary" :size="size" @click="$refs.form.submit()">保存</el-button>
        <!-- <el-button plain :size="size" @click="$refs.form.resetForm()">暂存</el-button> -->
        <el-button :size="size" @click="$emit('back')">取消</el-button>
      </template>
    </avue-form>
  </div>
</template>

<script>
import { requestTargetCreate, requestTargetUpdate } from '@/api/chart/chart'
import { INDEX_LIMIT_OPTIONS, FREQUENCY_OPTIONS, DATA_TYPE_OPTIONS } from '../indicator-definition.vue'

export default {
  name: 'ChartFormDetail',
  props: {
    detail: { type: Boolean, default: false },
    current: { type: Object, default: () => {} },
  },
  data() {
    return {
      loading: true,
      form: {},
      option: {
        detail: this.detail,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: 'left',
        labelSuffix: ' ',
        group: [
          {
            label: '基本信息',
            arrow: false,
            prop: 'jbxx',
            column: [
              {
                label: '指标编码',
                prop: 'code',
                span: 8,
                rules: [{ required: true, message: '请输入指标编码' }],
              },
              {
                label: '指标名称',
                prop: 'name',
                span: 8,
                rules: [{ required: true, message: '请输入指标名称' }],
              },
              // {
              //   label: '英文简称',
              //   prop: 'abbreviationEn',
              //   span: 8,
              // },
              {
                label: '简称',
                prop: 'abbreviationAlias',
                span: 8,
              },
              // {
              //   label: '业务口径',
              //   prop: 'businessDesc',
              //   type: 'textarea',
              //   maxLength: 300,
              //   showWordLimit: true,
              //   span: 24,
              // },
              {
                label: '指标定义',
                prop: 'indexDefine',
                span: 24,
                type: 'textarea',
                maxLength: 300,
                showWordLimit: true,
                rules: [{ required: true, message: '请输入指标定义' }],
              },
            ],
          },
          {
            label: '业务标准',
            arrow: false,
            prop: 'ywbz',
            column: [
              // {
              //   label: '指标定义',
              //   prop: 'indexDefine',
              //   span: 8,
              //   rules: [{ required: true, message: '请输入指标定义' }],
              // },
              {
                label: '指标用途',
                prop: 'indexFunction',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择指标用途' }],
                dicUrl: '/api/sys/dict/list',
                props: {
                  label: 'dictValue',
                  value: 'dictValue',
                },
                dicMethod: 'post',
                dicQuery: {
                  dictTypeCode: 'martix_use',
                },
              },
              {
                label: '指标来源',
                prop: 'indexSource',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择指标来源' }],
                dicUrl: '/api/sys/dict/list',
                props: {
                  label: 'dictValue',
                  value: 'dictValue',
                },
                dicMethod: 'post',
                dicQuery: {
                  dictTypeCode: 'martix_source',
                },
              },
              {
                label: '指标极限',
                prop: 'indexLimit',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择指标极限' }],
                dicData: INDEX_LIMIT_OPTIONS,
              },
              {
                label: '指标分类',
                prop: 'indexType',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择指标分类' }],
                dicUrl: '/api/sys/dict/list',
                props: {
                  label: 'dictValue',
                  value: 'dictValue',
                },
                dicMethod: 'post',
                dicQuery: {
                  dictTypeCode: 'martix_type',
                },
              },
              {
                label: '指标标签',
                prop: 'indexLabel',
                type: 'select',
                multiple: true,
                clearable: true,
                span: 8,
                dicUrl: '/matrix/label/query',
                allowCreate: true,
                filterable: true,
                defaultFirstOption: true,
                props: {
                  label: 'name',
                  value: 'name',
                },
                dicMethod: 'post',
              },
            ],
          },
          {
            label: '数据标准',
            arrow: false,
            prop: 'ywbz',
            column: [
              {
                label: '计算公式',
                prop: 'formula',
                span: 8,
                rules: [{ required: true, message: '请输入计算公式' }],
              },
              {
                label: '单位',
                prop: 'unit',
                span: 8,
                rules: [{ required: true, message: '请输入单位' }],
              },
              {
                label: '频率',
                type: 'select',
                prop: 'frequency',
                span: 8,
                rules: [{ required: true, message: '请选择频率' }],
                dicData: FREQUENCY_OPTIONS,
              },
              {
                label: '需求维度',
                prop: 'dimension',
                span: 8,
                rules: [{ required: true, message: '请输入需求维度' }],
              },
              // {
              //   label: '数值类型',
              //   prop: 'dataType',
              //   type: 'select',
              //   span: 8,
              //   rules: [{ required: true, message: '请选择数值类型' }],
              //   dicData: DATA_TYPE_OPTIONS,
              // },
              {
                label: '数据精度',
                prop: 'dataAccuracy',
                span: 8,
                rules: [{ required: true, message: '请输入数据精度' }],
              },
              // {
              //   label: '呈现形式',
              //   prop: 'chartType',
              //   span: 8,
              //   rules: [{ required: true, message: '请输入呈现形式' }],
              // },
            ],
          },
          {
            label: '管控标准',
            arrow: false,
            prop: 'gkbz',
            column: [
              {
                label: '责任单位',
                prop: 'company',
                type: 'tree',
                span: 8,
                rules: [{ required: true, message: '请选择责任单位' }],
                dicUrl: '/api/dept/tree',
                props: {
                  label: 'name',
                  value: 'deptId',
                },
                dicMethod: 'post',
              },
              {
                label: '责任岗位',
                prop: 'position',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择责任岗位' }],
                dicUrl: '/api/sys/post/list',
                props: {
                  label: 'postName',
                  value: 'id',
                },
                dicMethod: 'get',
              },
              {
                label: '责任人',
                prop: 'director',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择责任人' }],
                dicUrl: '/api/user/userGrid/1/999',
                props: {
                  label: 'nickName',
                  value: 'userId',
                },
                dicMethod: 'post',
                dicFormatter: (res) => res.listObject,
              },
              {
                label: '版本',
                prop: 'version',
                span: 8,
                rules: [{ required: true, message: '请输入版本' }],
              },
              {
                label: '修订人',
                prop: 'reviser',
                type: 'select',
                span: 8,
                rules: [{ required: true, message: '请选择修订人' }],
                disabled: true,
              },
              {
                label: '修订时间',
                prop: 'createdAt',
                span: 8,
                rules: [{ required: true, message: '请输入修订时间' }],
                disabled: true,
              },
              {
                label: '备注',
                prop: 'remark',
                type: 'textarea',
                maxLength: 300,
                showWordLimit: true,
                span: 24,
              },
            ],
          },
        ],
      },
      isEdit: false,
    }
  },
  watch: {
    current: {
      deep: true,
      immediate: true,
      handler() {
        this.init()
      },
    },
    form: {
      deep: true,
      immediate: true,
      handler(value) {
        if (!this.isEdit) {
          localStorage.setItem('chart', JSON.stringify(value))
        }
      },
    },
  },
  methods: {
    async submit(_, done) {
      const res = this.isEdit ? await requestTargetUpdate(this.form) : await requestTargetCreate(this.form)
      if (res.success) {
        this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
        !this.isEdit && localStorage.removeItem('chart')
        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
          this.$router.replace('/charts/list')
        })
      } else {
        this.$message.error(res.message)
      }
      done()
    },
    async init() {
      if (this.$route.params.id) {
        this.loading = false
        this.isEdit = true
      } else {
        this.loading = false
        this.isEdit = false
      }
      this.form = { ...this.current }
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-form-detail {
  background: #fff;
}
</style>
